"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { ModeToggle } from "@/components/mode-toggle"
import { useUser } from "@/lib/user-context"

export default function Header() {
  const pathname = usePathname()
  const { user, login, logout } = useUser()

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center justify-between">
        <div className="flex items-center gap-2 md:gap-4">
          <Link href="/" className="font-bold text-xl">
            英语练习系统
          </Link>
          <nav className="hidden md:flex gap-4">
            <Link
              href="/"
              className={`text-sm font-medium transition-colors hover:text-primary ${
                pathname === "/" ? "text-primary" : "text-muted-foreground"
              }`}
            >
              首页
            </Link>
            <Link
              href="/practice/vocabulary-grammar"
              className={`text-sm font-medium transition-colors hover:text-primary ${
                pathname.startsWith("/practice") ? "text-primary" : "text-muted-foreground"
              }`}
            >
              练习
            </Link>
            <Link
              href="/wrong-answers"
              className={`text-sm font-medium transition-colors hover:text-primary ${
                pathname === "/wrong-answers" ? "text-primary" : "text-muted-foreground"
              }`}
            >
              错题本
            </Link>
            <Link
              href="/progress"
              className={`text-sm font-medium transition-colors hover:text-primary ${
                pathname === "/progress" ? "text-primary" : "text-muted-foreground"
              }`}
            >
              进度
            </Link>
          </nav>
        </div>
        <div className="flex items-center gap-2">
          <ModeToggle />
          {user ? (
            <Button variant="outline" onClick={logout}>
              退出
            </Button>
          ) : (
            <Button onClick={login}>登录</Button>
          )}
        </div>
      </div>
    </header>
  )
}
